<template>
	<!-- 问题咨询 -->
	<div >
		 <div class="R_quanyemian">

		        <div class="R_tongzhitupian"></div>
		        <div style="width: 85%;margin: 0 auto;">
		            <div class="anniukuang">
		                <button v-bind:class="[currentType?'anniu':'button_current']" @click="changeInquiryType">所有咨询</button>
		                <button v-bind:class="[!currentType?'anniu':'button_current']" @click="changeInquiryType">我的咨询</button>
		            </div>

		            <div class="waikaung">
		                <div class="neirong">
		                    <div class="toubu">
		                        <h1>{{currentType?'我的咨询':'所有咨询'}}</h1>
		                        <div class="touwaikuang">
		                            <button class="xinjian" @click="dialogVisible=true">+ 新建</button>
		                            <div class="sousuokuang">
		                                <input class="shuru" type="search">
		                                <svg class="icon" aria-hidden="true">
		                                    <use xlink:href="#icon-sousuo"></use>
		                                </svg>
		                            </div>

		                        </div>
								<div class="xian"></div>

		                       <div class="yonghuzixun" v-for="item in  inquiryList">
		                            <div class="bianju">
										<img src="/img/9-0-3.png" class="touxiang" >

		                                <div class="mingzi">
		                                    <span>{{item.name}}</span>
		                                    <div class="pinlunshijian">
		                                        <span>{{item.createTime}}</span>
		                                    </div>
		                                </div>
		                            </div>
		                            <div class="wenti">
		                                <div class="wen">问</div>
		                                <span class="text_hidden" style="width: 80%;text-align: left;">{{item.wtwnr}}</span>
		                            </div>
		                            <div class="huida">
		                                <span class="text_hidden" style="width: 80%;text-align: left;">回：{{item.whfnr}}</span>
		                            </div>
		                            <div class="huifu">
		                                <button class="suoyouhuifu" @click="detailInqu(item)">详情</button>
		                            </div>
		                        </div>

		                    </div>
		                    <div class="t_paging">
		                       <el-pagination
							    :current-page.sync="currentPage"
								@current-change="getInquiryList"
		                         background
		                         layout="pager,next"
		                         :total="total">
		                       </el-pagination>
		                    </div>
		                </div>
		            </div>
		        </div>
		    </div>

			<el-dialog
			  title="提示"
			  :visible.sync="dialogVisible"
			  width="45%"
			 >
			  <div >

				<el-input type="textarea" v-model="center" show-word-limit  maxlength="200" placeholder="输入提问内容" class="issue_input"></el-input>

			  </div>


			  <span slot="footer" class="dialog-footer">
			    <el-button type="primary" @click="addIssue">提交</el-button>
			  </span>
			</el-dialog>
			
			
			<el-dialog :visible.sync="dialogVisible2">
				<div id="" style="border: 1px solid #fcfcfc; background: rgb(0 0 0 / 5%);border-radius: 8px;padding: 20px 20px;">
		           		<el-row style="padding: 10px 0;">
							<el-col :span="20">
								<div class="" style="background-color: #fff;padding: 8px;width: auto;border-radius: 5px;">
								   {{currentInqury.wtwnr}}
								</div>
							</el-col>
							
							<el-col :span="4" style="text-align: center;">
								<img src="/img/9-0-3.png" style="width: 60px;border-radius: 40px;" >
							</el-col>
						</el-row>	
						
						<el-row style="padding: 10px 0;" v-if="currentInqury.whfnr!=null">
							
							
							<el-col :span="4" style="text-align: center;">
								<img src="/img/9-0-1.png" style="width: 60px;border-radius: 40px;" >
							</el-col>
							<el-col :span="20">
								<div class="" style="background-color: #fff;padding: 8px;width: auto;border-radius: 5px;">
									 {{currentInqury.whfnr}}
								</div>
							</el-col>
						</el-row>	
				</div>
					
					<span slot="footer">
						<el-button type="primary" @click="dialogVisible2=false">关闭</el-button>
					</span>
			</el-dialog>

	</div>


</template>

<script>
	export default {
		data(){
			return{
				dialogVisible:false,
				center:'',
				currentType:false  ,//当前问题类型
			    inquiryList:[],
				currentPage:1,
				pageSize:8,
				total:0,
				currentInqury:{},  //问题详情
				dialogVisible2:false,
			}
		},
		created() {
			this.getInquiryList();
		},
		methods:{
			//详情查看
			detailInqu(item){
				this.currentInqury=item
				this.dialogVisible2=true
			},
			
			//新增咨询
			addIssue(){
				let that=this
				this.$http.post("/inquiry/add",{center:this.center}).then(res=>{
					that.dialogVisible=false
					that.getInquiryList();
				})
			},
			//获取问题列表
			getInquiryList(){
				let that=this
				this.$http.get(`/inquiry/all?currentPage=${this.currentPage}&pageSize=${this.pageSize}&isPersonal=${this.currentType}`).then(res=>{
					that.inquiryList=res.data.list
					that.currentPage=res.data.currentPage
					that.total=res.data.total
				})
			},
			//切换问题类型
			changeInquiryType(){
				if(this.currentType){
					this.currentType=false
				}else{
					this.currentType=true
				}

				this.getInquiryList();
			}
		}


	}

</script>

<style scoped>

	.issue_input>>>.el-textarea__inner{
		height: 200px;
	}

	.button_current{
		width: 115px;
		height: 30px;
		background-color: #3066E3;
		font-size: 18px;
		color: #fff;
		border-radius: 5px;
		margin-top: 50px;
		margin-left: 10px;
	}

	.dialog_title_tag{
		background: #3066E3;
		color: #fff;
		padding: 5px;
		display: inline-block;

	}

	.dialog_title_text{
		border: 1px  solid  #3066E3;
		width: 120px;
		padding: 4px;
		display: inline-block;
	}

	 .R_quanyemian {
	           width: 100%;
	            height: 1400px;
	            background-color: #fff;
	            position: absolute;
	        }



	        .R_tongzhitupian {
	            width: 100%;
	            height: 300px;
	           background: url(../../public/img/8-0-0-1.png) no-repeat;
			   background-size: 100% 100%;
	            display: flex;
	        }

	        .anniukuang {
	            margin-left: 3.5%;
	        }

	        .anniu {
	            width: 115px;
	            height: 30px;
	            background-color: #fff;
	            font-size: 18px;
	            color: #000;
	            border-radius: 5px;
	            margin-top: 50px;
	            margin-left: 10px;
	        }


	        .neirong {
	            width: 92%;
	            height: 1800px;
	            background-color: #EDF2FF;
	            border-radius: 5px;
				margin: 30px auto;
	        }

	        .toubu {
	            margin-left: 30px;
	            padding-top: 50px;
	            /* margin-top: 50px; */
	        }

	        .toubu h1 {
	            margin: 0px;
	            color: #3066E3;
	        }

	        .touwaikuang {
	            float: right;
	            margin-top: -30px;
	            margin-right: 30px;
	        }

	        .xinjian {
	            width: 85px;
	            height: 34px;
	            background-color: #3066E3;
	            font-size: 20px;
	            color: #fff;
	            border-radius: 5px;
	            /* position: relative; */
	            /* float: right; */
	        }

	        .sousuokuang {
	            width: 200px;
	            height: 30px;
	            border: 3px solid #95B1F2;
	            border-radius: 5px;
	            float: right;
	            background-color: #3066E3;
	            /* margin-top: -20px; */

	        }

	        .shuru {
	            border: 0;
	            float: left;
	            width: 170px;
	            height: 30px;
	        }

	        .icon {
	            width: 2em;
	            height: 2em;
	            vertical-align: -0.15em;
	            fill: currentColor;
	            overflow: hidden;
	            float: right;
	            margin-top: -30px;
	        }

	        .xian {
	            width: 100%;
	            border: 1px solid #3066E3;
	            margin-top: 20px;
	            float: left;
	        }

	        .yonghuzixun {
	            width: 95%;
	            height: 165px;
	            background-color: #fff;
	            float: left;
	            margin-top: 30px;
	            border-radius: 5px;
	            display: flex;
	            flex-direction: column
	        }

	        .bianju {
	            margin: 20px 0px 10px 20px;

	        }

	        .touxiang {
	            width: 60px;
	            height: 60px;
	            border-radius: 50%;
	            float: left;
	        }

	        .mingzi {
	            float: left;
	            margin-top: 10px;
	            margin-left: 15px;
	        }

	        .mingzi>span {
	            font-size: 20px;
	        }

	        .pinlunshijian>span {
	            font-size: 15px;
	            color: #929292;
	        }

	        .wenti {
	            float: left;
	            margin: 0 0 0 20px;
	        }

	        .wenti>span {
	            font-size: 18px;
	            text-align: center;
	            margin-left: 10px;
	        }

	        .wen {
	            width: 25px;
	            height: 25px;
	            background-color: #3066E3;
	            float: left;
	            border-radius: 5px;
	            text-align: center;
	            color: #fff;
	        }

	        .huida {
	            margin: 10px 0 0 20px;
	            color: #929292;
	        }

	        .suoyouhuifu {
	            width: 100px;
	            height: 40px;
	            float: right;
	            margin: -80px 30px 0 0;
	            background-color: #3066E3;
	            border-radius: 5px;
	            color: #fff;
	        }

	        /* 分页 */

	        .t_paging {
	            float: left;
	            text-align: center;
	            margin: 20px 0 0 35%;
	        }

	        .t_paging ul {
	            list-style: none;
	            display: flex;
	            height: 50px;
	        }

	        .t_paging li {
	            line-height: 50px;
	            text-align: center;
	            border-radius: 3.5px;
	        }

	        .t_paging li:not(.t_upAndDown) {
	            width: 50px;
	            height: 50px;
	            border: 1px solid #91ADF0;
	            background-color: #fff;
	        }

	        .t_paging li:not(:last-child) {
	            margin-right: 10px;
	        }

	        .t_paging li a {
	            color: black;
	            display: inline-block;
	            text-decoration: none;
	            font-size: 20px;
	            width: 100%;
	            height: 100%;
	            border-radius: 3.5px;
	        }

	        .t_upAndDown {
	            width: 150px;
	            background-color: #3066E3;
	            margin: 0 0 0 10px;
	        }

</style>
